<template>
	<view class="layout">
		<view class="layout-header">
			<view class="layout-header-left">
				<image src="@/static/icon/icon_home_search.png" />

				<input
					focus
					auto-blur
					confirm-type="search"
					placeholder="请输入开户行名称"
					@input="changekeyWord"
					@confirm="changekeyWord"
					v-model="requestParams.keyWord"
					placeholder-class="input-placeholder"
				/>

				<!-- <image v-show="isEmpty" @touchend.prevent="emptySearch" src="@/static/icon/icon_search_delete.png" /> -->
			</view>
		</view>

		<view class="layout-main" :class="{ isPadding: accountBankList.length }">
			<view class="layout-main-item" :key="index" @click="handleClickAccountBank(item)" v-for="(item, index) in accountBankList">
				{{ item.bankName }}
			</view>

			<DistributionHint :type="isHintStatus" />
		</view>
	</view>
</template>

<script>
import { debounce } from 'lodash';
import { getAccountList } from '@/api/other';

import DistributionHint from '@/components/distributionHint';

export default {
	data() {
		return {
			isEmpty: false,

			isHintStatus: '', // nomore  nodata
			accountBankList: [],

			requestParams: {
				pageIndex: 1,
				pageSize: 15,

				keyWord: '',
				bankCode: undefined
			},

			debounced: debounce((e) => {
				this.isHintStatus = 'loading';

				this.getCurrentPageData(1);
			}, 500)
		};
	},

	onLoad(params) {
		const { bankCode } = params;

		this.requestParams.bankCode = bankCode;
		this.getCurrentPageData();
	},

	methods: {
		getCurrentPageData(pageIndex = this.requestParams.pageIndex) {
			const {
				requestParams: { keyWord, pageSize, ...otherParams }
			} = this;

			const params = {
				...otherParams,
				keyWord: keyWord.replace(/\s/g, ''),

				pageSize,
				pageIndex
			};

			getAccountList(params).then((res) => {
				const { code, data } = res;

				if (code !== 200) {
					return;
				}

				const filterData = data || [];
				const isPageIndex = pageIndex === 1;

				this.requestParams.pageIndex = pageIndex;
				this.accountBankList = isPageIndex ? filterData : [...this.accountBankList, ...filterData];
				this.isHintStatus = isPageIndex && !filterData.length ? 'nodata' : filterData.length < pageSize ? 'nomore' : '';
			});
		},

		changekeyWord(e) {
			this.debounced(e.detail.value);
		},

		handleClickAccountBank(params) {
			if (!Object.keys(params).length) {
				return;
			}

			const { id, bankName } = params || {};

			/* eslint-disable */
			const pages = getCurrentPages();
			const beforePage = pages[pages.length - 2];

			if (beforePage?.$vm.changeBankInfo) {
				beforePage.$vm.changeAccountBankInfo({
					accountId: id,
					bankBranchName: bankName
				});
				uni.navigateBack();
			}
			/* eslint enable */
		}
	},

	onReachBottom() {
		const {
			isHintStatus,
			requestParams: { pageIndex }
		} = this;

		if (isHintStatus) {
			return;
		}

		this.isHintStatus = 'loading';
		this.getCurrentPageData(pageIndex + 1);
	},

	components: {
		DistributionHint
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.layout {
	&-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #fff;
		z-index: 9999;
		padding: 12rpx 28rpx;

		display: flex;
		align-items: center;

		&-left {
			flex: 1;
			position: relative;

			input {
				color: #333;
				font-size: 28rpx;
				height: 76rpx;
				background: #f6f6f6;
				border-radius: 38rpx;
				padding: 0 76rpx;
			}

			/deep/ .input-placeholder {
				color: #949aa6;
				font-size: 28rpx;
			}

			image {
				position: absolute;
				top: 50%;
				width: 36rpx;
				height: 36rpx;
				transform: translateY(-50%);

				&:nth-child(1) {
					left: 24rpx;
				}

				&:nth-child(3) {
					right: 18rpx;
				}
			}
		}
	}

	&-main {
		margin-top: 120rpx;
		background: #fff;

		&-item {
			display: flex;
			align-items: center;

			height: 100rpx;

			color: #1f1f1f;
			font-size: 28rpx;
			padding-left: 34rpx;
		}

		&.isPadding {
			@include Db_iosBottomDistance();
		}
	}
}
</style>
